<template>
  <view
    @tap="playVideo"
    class="chat-message-video flex-column" 
    :style="style" 
    :class="{reverse: isReverse && isSenderThemselve}">
    <image class="chat-message-video-cover" :src="messageContent?.data?.coverUrl" />
    <view class="chat-message-video-mask flex-column">
      <text class="chat-message-video-play iconfont icon-play"></text>
    </view>
    <view class="chat-message-video-info flex-row">
      <span>{{ XBCCS.util.formatBytes(messageContent?.data?.size) }}</span>
      <span>{{ XBCCS.util.formatDuration(messageContent?.data?.duration) }}</span>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { messageProps, useMessage } from '@/hooks/useMessage'
import XBCCS from 'xbccs'

const props = defineProps(messageProps)
const size = reactive({width: 0, height: 0})
const { isSenderThemselve, messageContent } = useMessage(props)
const style = computed(() => {
  const { width, height } = messageContent.value?.data
  size.width = width
  size.height = height
  return XBCCS.util.getImageSize(size.width, size.height, 200)
})

// 初始化播放器
function playVideo() {
  uni.navigateTo({
  	url: '/pages/chat/video?src='+encodeURIComponent(messageContent.value?.data?.url)
  })
}
</script>

<style lang="scss" scoped>
.chat-message-video {
  width: 400rpx;
  height: 250rpx;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border-radius: 0 10rpx 10rpx 10rpx;

  &.reverse {
    border-radius: 10rpx 0 10rpx 10rpx;
  }

  &-cover {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  &-mask {
    @include fullsize();
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
  }

  &-info {
    width: 100%;
    color: #f5f5f5;
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.8) 100%);
  }

  &-play {
    color: #f5f5f5;
    font-size: 76rpx;
  }
}
</style>